<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 创建dmo根节点，一个页面中需要有一个根节点，这个节点下的内容会被react管理 -->
    <div id="app"></div>
</body>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<!-- 使用react语法（jsx），记得type="text/babel" -->
<script type="text/babel">

    /* 
        jsx对象只能有一个根节点
        jsx对象如果要多行书写，推荐使用()括住
    */
    let myDom = 
        (<div>
            <h1>
                {/* 我是注释 */}
                你好世界
            </h1>
            <p>我是一段文字</p>
        </div>);

    // React17以前
    // ReactDOM.render(myDom, document.getElementById("app"));

    // React17以后创建根节点
    let root = ReactDOM.createRoot(document.getElementById("app"));

    // 渲染jsx对象
    root.render(myDom);
</script>

</html>